<template>
  <div class="user-list">
    <UserListSearch></UserListSearch>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        align="center"
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        align="center"
        prop="account"
        label="账号"
        width="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="userName"
        label="用户名"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        align="center"
        prop="lastLoginTime"
        label="上一次登录时间"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{time(scope.row.lastLoginTime)}}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="enabled"
        label="账号是否可用"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        align="center"
        prop="notExpired"
        label="是否过期"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        align="center"
        prop="accountNotLocked"
        label="账号是否锁定"
        show-overflow-tooltip>
      </el-table-column>
      <el-table-column
        align="center"
        prop="updateTime"
        label="修改时间"
        show-overflow-tooltip>
        <template slot-scope="scope">
          {{time(scope.row.updateTime)}}
        </template>
      </el-table-column>
       <el-table-column
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
        <!-- <i @click="view(scope.row.id)" class="el-icon-view viewIconClass"></i> -->
        <i @click="edit(scope.row.id)" class="el-icon-edit editIconClass"></i>
        <!-- <i @click="del(scope.row.id)"  class="el-icon-delete deleteIconClass"></i> -->
      </template>
      </el-table-column>
    </el-table>
    <MyPagination :pagination="pagination" @handleCurrentChange="handleCurrentChange" @handleSizeChange="handleSizeChange"></MyPagination>
  </div>
</template>

<script>
import UserListSearch from './components/userListSearch.vue'
import MyPagination from '../../components/pagination/myPagination'
import dateTimeUtil from '../../util/dateTimeUtil'
import {postRequest} from '../../util/http'

export default {
  name: 'UserList',
  components: {
    UserListSearch,
    MyPagination
  },
  data () {
    return {
      pagination: { // 分页组件参数
        total: 0,
        currentPage: this.current,
        pageSize: this.size
      },
      param: { // 分页接口参数
        current: 1,
        size: 10
      },
      tableData: [], // 表格数组
      multipleSelection: []
    }
  },
  created () {
    this.init()
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    // 初始化
    init () {
      this.page()
    },
    // 分页方法
    async page () {
      let res = await postRequest('/sysUser/list', this.param)
      this.tableData = res.data.records
      this.pagination.total = res.data.total
    },
    // 切换分页方法
    handleCurrentChange (current) {
      this.param.current = current
      this.page()
    },
    // 切换分页大小方法
    handleSizeChange (size) {
      this.param.size = size
      this.page()
    },
    time (date) {
      return dateTimeUtil.getDetailedFormatDate(new Date(date))
    },
    // // 搜索
    // search (param) {
    //   this.param.keyWord = param.keyWord
    //   this.page()
    // },
    // // 重置
    // reset () {
    //   this.param.keyWord = ''
    //   this.page()
    // },
    // // 添加
    // add () {
    //   this.$router.push({path: '/commodity/add', query: {type: 1}})
    // },
    // 编辑
    edit (id) {
      this.$router.push({path: '/commodity/edit', query: {type: 2, id: id}})
    }
    // // 删除
    // async del (id) {
    //   let res = await postRequest('/commodity/delete', {id: id})
    //   this.$message({
    //     message: res.data ? '删除成功' : '删除失败',
    //     type: 'success'
    //   })
    //   this.reset()
    // },
    // // 详情
    // async view (id) {
    //   this.$router.push({path: '/commodity/view', query: {id: id}})
    // }
  }
}
</script>

<style>
.el-table .cell{
  line-height: 2rem;
}
</style>
